<template>
	<view>
		<view class="topbox">
			<view>{{type}}</view>
		</view>
		<!-- 历史列表 -->
		<view v-if="type == '历史记录' && historylist !== null">
			<view v-for="(item, index) in historylist" class="listitem">
				<view @click="NavToGrade(item.time)" class="item">
					<text>{{getNowDate(item.time)}}</text><text>{{item.subject}}{{item.type}}</text>
				</view>
			</view>
		</view>
		<!-- 错题列表 -->
		<view v-if="type == '错题列表' && wronglist !== null">
			<view v-for="(item, index) in wronglist" class="listitem">
				<view @click="NavToWrong(item)" class="item">
					<text>{{item.subject}}</text><text>{{item.questionIds.length}}</text>
				</view>
			</view>
		</view>
		<!-- 收藏列表 -->
		<view v-if="type == '收藏列表' && collectlist !== null">
			<view v-for="(item, index) in collectlist" class="listitem">
				<view @click="NavToCollect(item)" class="item" @touchmove="touchMove" @touchend="touchEnd" @touchstart="touchStart($event, index)">
					<text>{{item.foldername}}</text><text>{{item.questionIds.length}}</text>
				</view>
				<button @click="clickSlipe(item)" v-if="isShow[index]">删除</button>
			</view>
		</view>
		<!-- 试卷列表 -->
		<view v-if="type == '试卷' && testpaperlist !== null">
			<view v-for="(item, index) in testpaperlist" class="listbox">
				<view @click="btnShow.splice(index, 1, !btnShow[index]) " class="item">
					<text>{{getNowDate(item.time)}}</text><text>{{item.testpaper}}</text>
				</view>
				<view class="btnbox" v-if="btnShow[index]">
					<button @click="NavToTest(item, 1)">新建</button>
					<button type="primary" @click="NavToTest(item, 0)">继续</button>
				</view>
			</view>
		</view>
		<!-- 试卷列表 -->
		<view v-if="type == '试卷记录' && historylist !== null">
			<view v-for="(item, index) in historylist" class="listitem">
				<view @click="NavToGrade(item.time)" class="item">
					<text>{{getNowDate(item.time)}}</text><text>{{item.testpaper}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { gethistorylist, getwronglist, getquestions, getcollectlist, delcollectfolder, gettestpaperlist } from '../../apis/questionAPI.js'
	export default {
		data() {
			return {
				type: '',
				historylist: [],
				wronglist: [],
				collectlist: [],
				testpaperlist: [],
				isShow: [],
				startX: 0,
				moveX: 0,
				num: 0,
				btnShow: [],
				subject: ''
			}
		},
		onLoad(option) {
			this.type = option.type
			this.subject = option.subject
			let that = this
			if (option.subject) {
				// 获取试卷
				gettestpaperlist({
					subject: option.subject
				}).then(res => {
					that.testpaperlist = res.testpaperlist
					for (let i=0; i<res.testpaperlist.length; i++) {
						that.btnShow.push(false)
					}
				})
			} else {
				if (option.type == '历史记录') {
						// 获取历史信息
						gethistorylist({
							username: uni.getStorageSync('token'),
							type: option.type
						}).then(res => {
							that.$store.dispatch('sethistorylist', res.historylist.reverse())
							that.historylist = res.historylist.reverse().reverse()
						})
				} else if (option.type == '错题列表') {
					if (this.$store.state.wronglist == null) {
						// 获取错题列表
						getwronglist({
							username: uni.getStorageSync('token')
						}).then(res => {
							that.$store.dispatch('setwronglist', res.wronglist)
							that.wronglist = res.wronglist
						})
					} else {
						this.wronglist = this.$store.state.wronglist
					}
				} else if (this.type == '试卷记录') (
					gethistorylist({
						username: uni.getStorageSync('token'),
						type: option.type
					}).then(res => {
						that.historylist = res.historylist.reverse()
					})
				)
			}
		},
		onShow() {
			// console.log(this.type)
			let that = this
			if (this.type == '收藏列表') {
				if (this.$store.state.collectlist == null) {
					// 获取收藏列表
					getcollectlist({
						username: uni.getStorageSync('token')
					}).then(res => {
						// console.log(res.collectlist)
						that.$store.dispatch('setcollectlist', res.collectlist)
						that.collectlist = res.collectlist
						that.InitIsShow(res.collectlist.length)
						// console.log(res.collectlist)
					})
				} else {
					this.collectlist = this.$store.state.collectlist
					that.InitIsShow(this.$store.state.collectlist.length)
				}
			}
		},
		methods: {
			// 跳转成绩
			NavToGrade(time) {
				let type = this.type == '试卷记录' ? '试卷' : '历史'
				uni.navigateTo({
					url: `/pages/grade/grade?time=${time}&type=${type}`,
				})
			},
			// 跳转错题
			NavToWrong(item) {
				let that = this
				// console.log(item.questionIds)
				getquestions({
					questionIds: item.questionIds
				}).then(res => {
					that.$store.dispatch('setquestions', res.questions)
					that.$store.dispatch('setanswers', item.answers)
					uni.navigateTo({
						url: `/pages/analysis/analysis?isAll=true&n=0`
					})
				})				
			},
			// 跳转收藏
			NavToCollect(item) {
				uni.navigateTo({
					url: `/pages/collect/collect?foldername=${item.foldername}`,
				})
			},
			// 获取时间
			getNowDate(time) {
				let date = new Date(time)
				  let sign2 = ":";
				  let year = date.getFullYear() // 年
				  let month = date.getMonth() + 1; // 月
				  let day = date.getDate(); // 日
				  let hour = date.getHours(); // 时
				  let minutes = date.getMinutes(); // 分
				  let seconds = date.getSeconds() //秒
				  // let weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
				  // let week = weekArr[date.getDay()];
				  // 给一位数的数据前面加 “0”
				  if (month >= 1 && month <= 9) {
					month = "0" + month;
				  }
				  if (day >= 0 && day <= 9) {
					day = "0" + day;
				  }
				  if (hour >= 0 && hour <= 9) {
					hour = "0" + hour;
				  }
				  if (minutes >= 0 && minutes <= 9) {
					minutes = "0" + minutes;
				  }
				  if (seconds >= 0 && seconds <= 9) {
					seconds = "0" + seconds;
				  }
				  return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
			},
			// 初始化管理数组
			InitIsShow(length) {
				let arr = []
				for (let k=0; k<length; k++) {
					arr.push(false)
				}
				this.isShow = arr
			},
			// 滑动
			touchStart(e, index){
				this.start = e.changedTouches[0].clientX
				// console.log(index)
				this.num = index
			},
			touchMove(e){
				this.moveX = (e.changedTouches[0].clientX - this.start)
			},
			touchEnd(){
				if (this.moveX>40) {
					this.isShow.splice(this.num, 1, false)
				} else if (this.moveX<-40) {
					this.isShow.splice(this.num, 1, true)
				}
				// console.log(this.isShow)
				// this.moveX = 0
			},
			// 删除收藏夹
			clickSlipe(item){
				const that = this
				uni.showModal({
					title: `删除《${item.foldername}》收藏夹？`,
					confirmColor:'#3A3A3A',
					cancelColor:'#999999',
					confirmText:'确定',
					success: function (res) {
						if (res.confirm) {
							delcollectfolder({
								username: uni.getStorageSync('token'),
								foldername: item.foldername
							}).then(r => {
								that.$store.dispatch('delcollectitem', item)
								that.collectlist = that.$store.state.collectlist
								that.InitIsShow()
							})
						}
					}
				})
			},
			// 跳转试卷答题
			NavToTest(item, isnew) {
				uni.navigateTo({
					// `/pages/exercise/exercise?type=${that.type}&subject=${that.subject}&num=${that.num}&isnew=${isnew}`
					url: `/pages/exercise/exercise?type=${this.type}&subject=${this.subject}&time=${item.time}&isnew=${isnew}&testpaper=${item.testpaper}`,
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.topbox {
		font-size: 3vh;
		height: 7vh;
		width: 25vw;
		margin: 2vh auto;
		line-height: 7vh;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
		
		view {
			background-color: #F8F8F8;
			text-align: center;
		}
	}
	.listitem {
		display: flex;
		
		.item {
			flex: 7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 5vw;
			height: 10vh;
			background-color: #F8F8F8;
			margin: 1vh;
			font-size: 2.5vh;
			border: 1px solid rgba(0,0,0,.2);
			border-radius: 10px;
			
			&:active {
				background-color: #dedede;
			}
		}
		
		button {
			flex: 1;
			height: 10vh;
			margin: 1vh 0;
			line-height: 10vh;
			background-color: rgba(256, 0, 0, .7);
			color: #fff;
		}
	}
	.listbox {
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 5vw;
			height: 10vh;
			background-color: #F8F8F8;
			margin: 1vh;
			font-size: 2.5vh;
			border: 1px solid rgba(0,0,0,.2);
			border-radius: 10px;
			
			&:active {
				background-color: #dedede;
			}
		}
		.btnbox {
			display: flex;
			button {
				width: 40vw;
			}
		}
	}
	
</style>